<template>
  <div>
    <div class="contentBox" style="overflow: auto">
      <div style="font-size: 18px; display: flex">
        培训知识点
        <p
          style="
            font-size: 14px;
            color: #f64137;
            margin: 0;
            margin-left: 16px;
            padding: 6px 12px;
            background: #f5f5f5;
            border-radius: 2px;
          "
        >
          点击学习下列知识点，查看对应的培训课程，学完所有课程方可增加
          该知识点对应的学时
        </p>
      </div>
      <ul class="packbox">
          <!-- :class="
            index < 6
              ? index % 6 == 0
                ? activeid == item.id
                  ? 'activeLi noMonemarginTop noMonemargin'
                  : 'noMonemarginTop noMonemargin'
                : activeid == item.id
                ? 'activeLi noMonemarginTop'
                : 'noMonemarginTop'
              : index % 6 == 0
              ? activeid == item.id
                ? 'activeLi noMonemargin'
                : 'noMonemargin'
              : activeid == item.id
              ? 'activeLi'
              : ''
          " -->
        <li
          v-for="(item) in list"
          :key="item.id"
          @click="rowlistGo(item)"
          :class="activeid == item.id?'activeLi':''"
        >
          <p :title="item.title">
            {{ item.title }}{{item.kind&&item.kind=='选学'?'(选学)':''}}
          </p>
          <!-- <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
                        <el-button>上边</el-button>
                    </el-tooltip> -->
          <div style="display: flex; justify-content: space-between">
            <i style="color: #666666">{{ item.score }}学时</i>
            <div
              class="ticp"
              style="
                padding: 2px 3px;
                background: #d0021b;
                color: #fff;
                border-radius: 4px;
              "
              v-if="item.status == '已学完'"
            >
              已学完
            </div>
            <div
              class="ticp"
              style="
                padding: 2px 3px;
                background: #cccccc;
                color: #fff;
                border-radius: 4px;
              "
              v-else
            >
              待学习
            </div>
          </div>
        </li>
        <!-- <template v-if="$router.path=='/dashboard'"> 
          <template v-if="list.length % 4 !=0">
            <li v-for="item in 4 - (list.length % 4)" :key="item+102564585" style='visibility: hidden;'></li>
          </template>
        </template>
        <template v-else>
          <template v-if="list.length % 6 !=0">
            <li v-for="item in 6 - (list.length % 6)" :key="item+102564" style='visibility: hidden;'></li>
          </template>
        </template> -->
        <!-- <li></li>
        <li></li>
        <li></li>
        <li></li> -->
        
      </ul>
    </div>
  </div>
</template>

<script>
import { materialkmlist, materialList, collectlist } from "@/api/admin.js";
import { getsubject_id, getsubjectTitle, getapplyid } from "@/utils/auth";
import eventBus from "@/utils/eventBus";
export default {
  props: ["activeName", "limit", "tabLabel", "idSad"],
  watch: {
    activeName(val) {
      // if(val=='课件'||val=='视频'){
      //     this.fileList(val)
      // }
    },
    // page(val){
    //     this.fileList(this.activeName)
    // },
    // limit(val){
    //     this.fileList(this.activeName)
    // },
  },
  data() {
    return {
      value: "",
      subjct: "",
      serchinput: "",
      list: [],
      dataList: [], //内容表
      fileData: [],
      arrs: "",
      activeid: "",
      formPage: this.$route.path.indexOf("curriculum") != -1,
    };
  },
  methods: {
    //如果知识点为空则清空课程
    clearList() {
      this.$bus.$emit("clear");
    },
    rowlistGo(row) {
      this.activeid = row.id;
      if (this.formPage) {
        this.$emit("msidBox", row.id);
      } else {
        this.$router.push({
          // path:'/curriculum/index',
          name: "curriculumindex",
          params: { ...row, tabLabel: this.tabLabel,activeName:this.activeName },
        });
      }
    },
    // command(item){
    //     this.value=item.title+'—'+item.score+'学时'
    //     this.subjct = item.id
    //     if(this.activeName=='课件'||this.activeName=="视频"){
    //         this.fileList(this.activeName)
    //     }else{
    //         this.collList()
    //     }
    // },
    //课件条件列表
    listData(id) {
      // this.formPage = !Boolean(id)
      this.list = [];
      this.dataList = [];
      this.value = "";
      this.page = 1;

      // this.subjct = id?id:getsubject_id()
      materialkmlist({
        msid: id ? id : getsubject_id(),
        applyid: getapplyid(),
        cate: this.tabLabel,
      }).then((res) => {
        
        this.list = [];
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.clearList();
            return false;
          }
          if (this.idSad) {
           
            this.activeid = this.idSad;
          } else {
            if (this.formPage) {
              this.activeid = res.data[0].id;
            } else {
              this.activeid = "";
            }
          }
          // if (this.$route.query.subjct) {
          //   console.log(12345555);
          //   let id = this.$route.query.subjct;
          //   res.data.map((item) => {
          //     if (item.id == id) {
          //       if (item.status == "已学完") {
          //         this.value =
          //           item.title + "—" + item.score + "学时" + "(已学完)";
          //       } else {
          //         this.value = item.title + "—" + item.score + "学时";
          //       }
          //       this.subjct = id;
          //     }
          //   });
          // }
          //   if (this.idSad) {
          //     let id = this.idSad;
          //     res.data.map((item) => {
          //       if (item.id == id) {
          //         if (item.status == "已学完") {
          //           this.value =
          //             item.title + "—" + item.score + "学时" + "(已学完)";
          //         } else {
          //           this.value = item.title + "—" + item.score + "学时";
          //         }
          //         this.subjct = id;
          //       }
          //     });
          //   }
          this.list = res.data;
          
          if (
            this.list.length > 0 &&
            this.$route.fullPath == "/curriculum/index"
          ) {
            if(this.activeid){
              res.data.map(item=>{
                if(item.id==this.activeid){
                  this.rowlistGo(item);
                }
              })
            }
          }

          //   let sum = -1;
          //   for (let i = 0; i < res.data.length; i++) {
          //     let item = res.data[i];
          //     if (i % 3 == 0) {
          //       this.list.push([]);
          //       sum++;
          //     }
          //     this.list[sum].push(item);
          //   }
          //   if (this.value == "") {
          //     if (this.list[0][0].status == "已学完") {
          //       this.value =
          //         this.list[0][0].title +
          //         "—" +
          //         this.list[0][0].score +
          //         "学时" +
          //         "(已学完)";
          //     } else {
          //       this.value =
          //         this.list[0][0].title + "—" + this.list[0][0].score + "学时";
          //     }
          //     this.subjct = this.list[0][0].id;
          //   }
          this.$emit("msidBox", this.activeid);

          this.$forceUpdate();
          //   if (
          //     this.activeName == "课件" ||
          //     this.activeName == "视频" ||
          //     this.activeName == "全部"
          //   ) {
          //     this.fileList(this.activeName);
          //   } else {
          //     this.collList();
          //   }
        }
      });
    },
    //收藏列表
    collList() {
      this.dataList = [];
      this.$emit("loading", true);
      collectlist({ msid: this.subjct, subjectid: getsubject_id() }).then(
        (res) => {
          this.dataList = [];
          this.$emit("loading", false);
          if (res.code == 200) {
            let num = -1;
            for (let i = 0; i < res.data.length; i++) {
              let item = res.data[i];
              if (i % 5 == 0) {
                this.dataList.push([]);
                num++;
              }
              this.dataList[num].push(item);
            }
            this.$emit("fileLists", this.dataList, 0, this.subjct);
          }
        }
      );
    },
  },
  created() {
    // eventBus.$on('goback',function(id){
    //     console.log(id)
    //     if(id){
    //         this.fileData.map(item=>{
    //             if(item.id==id){
    //                 console.log(id,'传递的参数')
    //                 this.value = item.title+'—'+item.score+'学时'
    //                 this.subjct = id
    //                 // this.$set(this.value,item.title+'—'+item.score+'学时')
    //                 // this.$set(eventBus.subjct,id)
    //                 console.log(this.subjct)
    //             }
    //         })
    //     }
    // }.bind(this))
    // console.log(this.subjct,'赋值的参数')
    // console.log()
  },
};
</script>

<style lang="scss">
.dropdownMenu {
  // display: flex;
  width: 70%;
  min-width: 679px;
  ul {
    display: flex;
    width: 100%;
    & > li {
      width: 33%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-dropdown-menu__item {
        width: 100%;
        text-align: center;
        .active {
          // background: #e8f4ff;
          color: #46a6ff;
        }
      }
    }
  }
  .el-radio {
    .el-radio__label {
      padding: 0;
    }
    .el-radio__input {
      display: none !important;
    }
  }
}
.dropdownBoxA {
  padding: 3px 5px;
  border: solid 1px #eee;
  border-radius: 5px;
}
</style>
<style lang="scss" scoped>
.contentBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  // align-items: center;
  // padding:24px 0;

  .packbox {
    // margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -8px;
    // justify-content: space-between;
    li {
      width: 260px;
      height: 85px;
      padding: 10px 16px;
      border-radius: 4px;
      background: #f7f7f7;
      // margin-left: 16px;
      margin: 0 8px;
      margin-top: 16px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      &:hover {
        background: #175dff;
        color: #fff;
        i {
          color: #dddddd !important ;
        }
        .ticp {
          background: #fff !important;
          color: #175dff !important;
        }
      }
    }
    p {
      line-height: 1.2;
      width: 100%;
      -webkit-line-clamp: 2;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .noMonemargin {
      margin-left: 0;
    }
    .noMonemarginTop {
      margin-top: 0;
    }
    .activeLi {
      background: #175dff;
      color: #fff;
      i {
        color: #dddddd !important ;
      }
      .ticp {
        background: #fff !important;
        color: #175dff !important;
      }
    }
  }
}
</style>